<template>
  <div class="videos">
    <div class="videos-wrapper">
      <loading v-if="!videosData" />
      <nodata v-else-if="!videosData.length"></nodata>
      <div v-else class="item">
        <ul>
          <li v-for="data in videosData" :key="data._id" v-if="data.videoNumber">
            <div class="name" @click="gotoVideos(data._id)">{{data.name}}</div>
            <div class="user-name">
              <span>{{data.userName}}</span>
              <span>
                视频数：
                <i>{{data.videoNumber}}</i>
              </span>
            </div>
            <div class="tags" v-if="data.tags.length && data.tags[0]">
              <el-tag size="mini" v-for="tag in data.tags" :key="tag.id">{{tag}}</el-tag>
            </div>
            <div class="date">
              <span>创建时间：{{data.created | setDate}}</span>
              <span>更新时间：{{data.updated | setDate}}</span>
            </div>
            <div class="desc">{{data.desc}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "videos",
  data() {
    return {
      videosData: ""
    };
  },
  mounted() {
    this.initMethods();
  },
  methods: {
    gotoVideos(id) {
      this.$router.push("/videos/" + id);
    },
    initMethods() {
      this.getAllVideosData().then(res => {
      
        this.videosData = res.data.data;
      });
    },
    ...mapActions("user", ["getAllVideosData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.videos
  width: 100%
  .videos-wrapper
    width: 100%
    background-color: #fff
    padding: 10px
    .item
      width: 100%
      >ul
        width: 100%
        >li
          width: 100%
          border-bottom: 1px solid #eee
          padding: 10px
          &:last-child
            border: none
          .name
            width: 100%
            line-height: 30px
            height: 30px
            overflow: hidden
            cursor: pointer
            font-size: 16px
            color: #333
            &:hover
              color: #eb2001
          .user-name
            @include flex(space-between,center)
            >span
              display: block
              >i
                color: #eb2001
          .tags
            width: 100%
            height: 32px
            line-height: 32px
            overflow: hidden
          .date
            width: 100%
            height: 25px
            @include flex(space-between,center)
            >span
              display: block
          .desc
            width: 100%
            line-height: 20px
            color: #999
</style>